define(function(require, exports, module) {

  // var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('lodash');
  // var jsonview = require('jsonview');
  var tmpl = require('text!../tmpl.html');

  var littleCanvas = require('hy5b/frontend/canvas/littleCanvas')
  var math = require('hy5b/math/index')
  // var d3 = require('d3')

  function main() {
    var $app = $('<div id="app">');
    $('#main').html($app);

    $app.append(tmpl);

    var lc = new littleCanvas().setSize(env.w, env.h);
    var elem = lc.pop();
    $app.append(elem);
    $(elem).css('background-color', 'rgb(51, 51, 51)');

    var cols = math.arithmeticSequence(30, 120, 7);
    var colors = ['#d94e5d','#eac736','#50a3ba'];
    
    // var interpolatorColor1 = d3.interpolate(d3.color(colors[0]), d3.color(colors[1]))
    // var colors1 = d3.quantize(interpolatorColor1, 50)
    // var interpolatorColor2 = d3.interpolate(d3.color(colors[1]), d3.color(colors[2]))
    // var colors2 = d3.quantize(interpolatorColor2, 50)
    // colors = colors1.concat(colors2)

    
    lc.ctx.translate(0.5, 0.5);

    for (var i = 0; i < 100; i++) {

      lc.draw(ctx => {

        ctx.lineWidth = 0.5;
        var colorIndex = _.random(0, 2)
        ctx.strokeStyle = colors[colorIndex];

        for (var k = 0; k < cols.length; k++) {
          var x = cols[k]
          var y = _.random(80, env.h - 80)

          if (k === 0) {
            ctx.moveTo(x, y)
          } else {
            ctx.lineTo(x, y)
          }
        }

        ctx.stroke()
      })
    }

    for (var i = 0; i < cols.length; i++) {
      lc.draw(ctx => {
        ctx.moveTo(cols[i], 50)
        ctx.lineTo(cols[i], env.h - 50)
        ctx.strokeStyle = 'rgb(170, 170, 170)';
        // ctx.lineWidth = 1; 
        ctx.stroke()
      })
    }

  }

  return main;
})
